<template>
    <div class="page-flex-column">
        <div class="search-box">
            <div class="search-form">
                <select-para style="width:20%;;margin-right:5px" v-model="ruleForm.searchType"
                    :label.sync="ruleForm.searchTypeName" :options="searchTypeArr" @change="changestype">
                </select-para>
                <el-date-picker style="width:50%;margin-right:5px;vertical-align:top;" v-model="ruleForm.loginDate" type="datetimerange"
                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                    v-if="ruleForm.searchType=='czsj'">
                </el-date-picker>
                <el-input style="width:50%;margin-right:5px;vertical-align:top;" v-model="ruleForm.hSystem"
                    v-if="ruleForm.searchType=='yy'" placeholder="请输入应用名称"></el-input>
                <el-button @click="clickQuery">搜索</el-button>
                <el-button @click="resetForm" type="success">
                    <i class="iconfont icon-reset"></i>
                    重置
                </el-button>
            </div>
            <div class="btn-wrap">
            </div>
        </div>
        <div class="table-box">
            <el-table stripe :key="tableKey" ref="table" height="100%" v-loading="loading" :data="tableData.columnData"
                @sort-change="sortChange">
                <el-table-column label="操作时间" prop="hDt" align="center" v-if="showColumn('hDt')" width="200">
                </el-table-column>
                <el-table-column label="操作人" prop="hName" v-if="showexport" align="left" width="200">
                </el-table-column>
                <el-table-column label="平台" prop="hPt" v-if="showColumn('hPt')" align="center" width="120">
                </el-table-column>
                <el-table-column label="应用" prop="hSystem" v-if="showColumn('hSystem')" align="left" width="150">
                </el-table-column>
                <el-table-column label="操作类型" prop="foucName" v-if="showColumn('foucName')" align="left" width="150">
                </el-table-column>
                <el-table-column label="摘要" prop="zyDescs" v-if="showColumn('zyDescs')" align="left">
                </el-table-column>
                <el-table-column label="操作" width="100" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" @click.stop="queryDetil(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination :page-sizes="[5,10,15,30,50]" :page-size="tableData.pageSize"
                layout="sizes,total,prev,pager,next" :total="tableData.total" :current-page="tableData.currentPage"
                @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </el-pagination>
        </div>
        <operateDetail ref="distri"></operateDetail>
    </div>
</template>

<script>
    import {
        columnSet,
        commPara,
        auth
    } from '@/mixins/mixins';
    import {
        mapState
    } from 'vuex';
    import operateDetail from './operateDetail'
    import moment from 'moment';
    import {
        queryOperateLogFun
    } from "@/service/core/userManage";
    import selectPara from '@/components/selectPara';
    export default {
        name: '',
        mixins: [columnSet, commPara, auth],
        components: {
            operateDetail,
            selectPara
        },
        props: {
            showexport: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                show: false,
                ruleForm: {
                    hSystem: '',
                    loginDate: [],
                    searchWords: '',
                    searchType: 'czsj',
                    searchTypeName: '操作时间'
                },
                searchTypeArr: [{
                        label: '应用',
                        value: 'yy'
                    },
                    {
                        label: '操作时间',
                        value: 'czsj'
                    }
                ],
                tableData: {
                    columns: 'hDt',
                    orders: 'DESC',
                    pageSize: 15,
                    currentPage: 1,
                    total: 0,
                    headerData: [{
                            label: '操作时间',
                            prop: 'hDt',
                            isShow: true
                        }, {
                            label: '应用',
                            prop: 'hSystem',
                            isShow: true
                        }, {
                            label: '平台',
                            prop: 'hPt',
                            isShow: true
                        },
                        {
                            label: '操作类型',
                            prop: 'foucName',
                            isShow: true
                        },
                        {
                            label: '摘要',
                            prop: 'zyDescs',
                            isShow: true
                        },
                    ],
                    columnData: [{}]
                },
                loading: false,
                selection: [],
            }
        },
        computed: {
            ...mapState({
                token: state => state.token.token,
                userid: state => state.token.userid
            }),
        },
        created() {
            this.clickQuery()
        },
        methods: {
            changestype(val) {
                this.ruleForm.loginDate = [];
                this.ruleForm.hSystem = ''

            },
            queryDetil(item) {
                this.$refs.distri.showDialog(item);
            },
            clickQuery() { // 搜索按钮
                this.tableData.currentPage = 1;
                this.tableDataInit();
            },
            resetForm() { // 重置按钮
                this.ruleForm.loginDate = [];
                this.ruleForm.hSystem = ''
                this.clickQuery();
            },
            sortChange(data) { // 表格数据排序
                if (data.order == "ascending") {
                    this.tableData.orders = "ASC";
                } else if (data.order == "descending") {
                    this.tableData.orders = "DESC";
                }
                this.tableData.columns = data.prop;
                this.clickQuery();
            },
            tableDataInit() { // 列表数据请求
                let params = {
                    rowSize: this.tableData.pageSize,
                    startRow: this.tableData.currentPage,
                    orders: this.tableData.orders,
                    columns: this.tableData.columns,
                    hSystem: this.ruleForm.hSystem,
                    hId: this.userid,
                    startDt: Array.isArray(this.ruleForm.loginDate) ? (this.ruleForm.loginDate[0] ? moment(this
                        .ruleForm
                        .loginDate[0]).format('YYYY-MM-DD HH:mm:ss') : '') : '',
                    endDt: Array.isArray(this.ruleForm.loginDate) ? (this.ruleForm.loginDate[1] ? moment(this
                        .ruleForm
                        .loginDate[1]).format('YYYY-MM-DD HH:mm:ss') : '') : '',
                    // 查询条件入参
                };
                if (this.showexport) {
                    delete params.hId
                }
                this.loading = true;
                queryOperateLogFun(params).then(res => {
                    if (res.data.code == 1000) {
                        let data = res.data.data;
                        if (Array.isArray(data.data)) {
                            this.tableData.columnData = [...data.data];
                            this.tableData.total = data.total;
                        } else {
                            this.tableData.columnData = [];
                            this.tableData.total = 0;
                        }
                    }
                    this.loading = false;
                }).catch(error => {
                    this.loading = false;
                })
            },
            handleCurrentChange(val) { // 分页方法 （点击第val页触发）
                this.tableData.currentPage = val;
                this.tableDataInit();
            },
            handleSizeChange(val) { // 分页方法 （改变每页val条触发）
                this.tableData.currentPage = 1
                this.tableData.pageSize = val;
                this.tableDataInit();
            },
            handleSelectionChange(selection) { // 表格复选框勾选触发
                this.selection = selection;
            },
            detailFun(row) { // 明细方法
                this.$refs.detail.showLayout(row);
            },
        }
    }

</script>

<style lang="scss" scoped>
    .page-wrap {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .flex-1 {
            overflow: hidden;
        }
    }

</style>
